<template>
    <div class="category">
      <s-Header name="我的订单" >
        <div class="header-search">
          <div class="search-content">
            <i class="nbicon nbSearch"></i>
          <router-link tag="span" class="search-title" to="./product-list?from=category">全场50元起步</router-link>
          </div>
        </div>
      </s-Header>
      <!-- 封装navbar-->
      <nav-bar></nav-Bar>
      <div class="search-wrap" ref="searchWrap">
        <div class="side-tabs">
          <better-scroll :scroll-data="state.categoryData" class="nav-side-wrapper">
            <ul class="nav-side">
              <li
                v-for="item in state.categoryData"
                :key="item.categoryId"
                v-text="item.categoryName"
                :class="{'active' : state.currentIndex == item.categoryId}"
                @click="selectMenu(item.categoryId)"
              ></li>
            </ul>
          </better-scroll>
        </div>
        
        <div class="search-content">
          <better-scroll :scroll-data="state.categoryData" >
            <div class="swiper-container">
              <template v-for="(category, index) in state.categoryData">
                <div class="swiper-slide" v-if="state.currentIndex == category.categoryId" :key="index">
                  <!-- <img class="category-main-img" :src="category.mainImgUrl" v-if="category.mainImgUrl"/> -->
                  <div class="category-list" v-for="(products, index) in category.secondLevelCategoryVOS" :key="index">
                    <p class="catogory-title">{{products.categoryName}}</p>
                    <div class="product-item" v-for="(product, index) in products.thirdLevelCategoryVOS" :key="index" @click="selectProduct(product)">
                      <img src="//s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png" class="product-img"/>
                      <p v-text="product.categoryName" class="product-title"></p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </better-scroll>
        </div>
      </div>
      <!-- van-tabbar 启用路由模式-->
      <van-tabbar v-if="false" route>
        <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/category" icon="search" dot>分类</van-tabbar-item>
        <van-tabbar-item to="/home" icon="friends-o" badge="5">购物车</van-tabbar-item>
        <van-tabbar-item to="/user" icon="setting-o" badge="20">我的</van-tabbar-item>
      </van-tabbar>

    </div>
  </template>
  <script setup>
    import { useRoute, useRouter } from 'vue-router'
    import { reactive, ref, isRef, isReactive,nextTick, onUnmounted, onMounted  } from 'vue'
    import { showSuccessToast, showFailToast, showLoadingToast, closeToast } from 'vant'
    import { getCategory } from "@/service/good"
    import BetterScroll from '@/components/BetterScroll.vue'
    import navBar from '@/components/NavBar.vue'
    import sHeader from '@/components/SimpleHeader.vue'
  
    const router = useRouter();
    const route = useRoute();
    console.log('router...',router,route)

    const state = reactive({
      categoryData: [],
      currentIndex: 15
    })

    onMounted(async()=>{
      showLoadingToast('加载中...')
      const { data } = await getCategory()
      closeToast()
      state.categoryData = data
    })

    const selectMenu = (categoryId) => {
      console.log('selectMenu...',categoryId)
      state.currentIndex = categoryId;
    }

    const selectProduct = (item) => {
      console.log('item', item.categoryId)
      router.push({ path: '/product-list', query: { categoryId: item.categoryId } })
    }
    const goBack = () => {
      router.go(-1)
    }
    const goTo = (r, query) => {
      router.push({ path: r, query: query || {} })
    }
  </script>
    
  
  <style lang="less" scoped>
    @import '../common/style/mixin';
    .category{
      height: 100%;
      width: 100%;
      .simple-header{
        .header-search{
          flex-grow: 1;
          display: flex;
          justify-content: center;
          .search-content{
            width: 80%;
            background: #eee;
            margin: 8px;
            border-radius: 20px;
            display: flex;
            justify-content: start;
            align-items: center;
            color: #232326;
            i{
              padding: 10px;
            }
            .search-title{
              font-size: 0.32rem;
              color: #666;
              line-height: 0.56rem;
            }
          }
        }
      }
      .search-wrap{
        height: calc(100% - 94px);
        display: flex;
        .side-tabs{
          height: 100%;
          font-size: 14px;
          background: #f8f8f8;
          .nav-side-wrapper{
            overflow: hidden;
            height:100%;
            ul{
              // height: 100%;
              width: 105px;
            }
            li{
              height: 52px;
              line-height: 52px;
              text-align: center;
              &:hover{
                background: #fff;
              }
              &.active{
                background: #fff; 
              }
            }
          }
        }
        .search-content{
          flex-grow: 1;
          background: #fff;
          overflow-y: scroll;
          touch-action: pan-y;
          * {
              touch-action: pan-y;
            }
          .boxSizing();
          .swiper-container {
            width: 100%;
            .swiper-slide {
              width: 100%;
              .category-main-img {
                width: 100%;
              }
              .category-list {
                display: flex;
                flex-wrap: wrap;
                flex-shrink: 0;
                width: 100%;
                .catogory-title {
                  width: 100%;
                  font-size: 17px;
                  font-weight: 500;
                  padding: 20px 0;
                }
                .product-item {
                  width: 33.3333%;
                  margin-bottom: 10px;
                  text-align: center;
                  font-size: 15px;
                  .product-img {
                    .wh(30px, 30px);
                    width:30px;
                    height: 30px;
                  }
                }
              }
            }
          }
        }
      }
    }
  </style>
  <style lang="less" scoped>
     
  </style>